<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>分组柱状图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<h1 align="center">微博公众号</h1>

<div id="mountNode2"></div>

<h1 align="center">新时代</h1>

<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  var data = [{'name': '领航中国', 'type': '讨论', 'value': 362.4000},
             {'name': '领航中国', 'type': '阅读', 'value': 879000.0000},
             {'name': '经典咏流传', 'type': '讨论', 'value': 1343.4000},
             {'name': '经典咏流传', 'type': '阅读', 'value': 660000.0000},
             {'name': '致敬中国军人', 'type': '讨论', 'value': 182.4000},
             {'name': '致敬中国军人', 'type': '阅读', 'value': 462000.0000},
             {'name': '国学新青年', 'type': '讨论', 'value': 128.7000},
             {'name': '国学新青年', 'type': '阅读', 'value': 320999.9999},
             {'name': '致敬消防英雄', 'type': '讨论', 'value': 308.4000},
             {'name': '致敬消防英雄', 'type': '阅读', 'value': 273000.0000},
             {'name': '世界第一张黑洞照片', 'type': '讨论', 'value': 89.1000},
             {'name': '世界第一张黑洞照片', 'type': '阅读', 'value': 231000.0000},
             {'name': '今日说法', 'type': '讨论', 'value': 130.5000},
             {'name': '今日说法', 'type': '阅读', 'value': 195000.0000},
             {'name': '平安守护', 'type': '讨论', 'value': 352.5000},
             {'name': '平安守护', 'type': '阅读', 'value': 183000.0000},
             {'name': '书画新浪潮', 'type': '讨论', 'value': 53.7000},
             {'name': '书画新浪潮', 'type': '阅读', 'value': 165000.0000},
             {'name': '篮球世界杯抽签', 'type': '讨论', 'value': 112.2000},
             {'name': '篮球世界杯抽签', 'type': '阅读', 'value': 162000.0000},
             {'name': '致敬公安英雄', 'type': '讨论', 'value': 69.3000},
             {'name': '致敬公安英雄', 'type': '阅读', 'value': 132000.0000}];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight/2-100
  });
  chart.source(data);
  chart.interval().position('name*value').color('type').adjust([{
    type: 'dodge',
    marginRatio: 1 / 32
}]);
  chart.render();


  function getTextAttrs(cfg) {
            return _.assign({},

             cfg.style, {
                fillOpacity: cfg.opacity,
                fontSize: cfg.origin._origin.size,
                rotate: cfg.origin._origin.rotate,
                text: cfg.origin._origin.text,
                textAlign: 'center',
                fontFamily: cfg.origin._origin.font,
                fill: cfg.color,
                textBaseline: 'Alphabetic'
            });
        }

        // 给point注册一个词云的shape
        G2.Shape.registerShape('point', 'cloud', {
            drawShape: function drawShape(cfg, container) {
                var attrs = getTextAttrs(cfg);
                return container.addShape('text', {
                    attrs: _.assign(attrs, {
                        x: cfg.x,
                        y: cfg.y
                    })
                });
            }
        });



        var data2 = [{'name': '央视新闻', 'value': 24},
                     {'name': '人民日报', 'value': 21},
                     {'name': '军报记者', 'value': 6},
                     {'name': '微博航空', 'value': 6},
                     {'name': '微博母婴', 'value': 3},
                     {'name': '凤凰网财经', 'value': 3},
                     {'name': '微博书法', 'value': 3},
                     {'name': '微言教育', 'value': 3},
                     {'name': '中国警方在线', 'value': 3},
                     {'name': '微博国学', 'value': 3},
                     {'name': '新华视点', 'value': 3},
                     {'name': '中国气象局', 'value': 3},
                     {'name': 'CCTV经典咏流传', 'value': 3},
                     {'name': '中欧信使', 'value': 3},
                     {'name': '中国青年报', 'value': 3},
                     {'name': 'CCTV今日说法', 'value': 3},
                     {'name': '平安洛阳', 'value': 3},
                     {'name': '微博县域', 'value': 3},
                     {'name': '国资小新', 'value': 3},
                     {'name': '四川日报', 'value': 3},
                     {'name': '中国科普博览', 'value': 3},
                     {'name': '中国反邪教', 'value': 3},
                     {'name': '融融来了', 'value': 3},
                     {'name': '健康中国', 'value': 3},
                     {'name': '警民携手同行', 'value': 3},
                     {'name': '微博节日', 'value': 3},
                     {'name': '东风快递', 'value': 3},
                     {'name': '燕鸣', 'value': 3},
                     {'name': '世界卫生组织', 'value': 3},
                     {'name': '国际篮联篮球世界杯', 'value': 3},
                     {'name': '共青团中央', 'value': 3}];;
        var dv = new DataSet.View().source(data2);
        var range = dv.range('value');
        var min = range[0];
        var max = range[1];
        dv.transform({
            type: 'tag-cloud',
            fields: ['name', 'value'],
            size: [window.innerWidth, window.innerHeight/2-100],
            font: 'Verdana',
            padding: 0,
            timeInterval: 5000, // max execute time
            rotate: function rotate() {
                var random = ~~(Math.random() * 4) % 4;
                if (random == 2) {
                  random = 0;
                }
                return 0; // 0, 90, 270
              },

            fontSize: function fontSize(d) {
                if (d.value) {
                    return (d.value - min) / (max - min) * (80 - 24) + 24;
                }
                return 0;
            }
        });
        var chart2 = new G2.Chart({
            container: 'mountNode2',
            width: window.innerWidth,
            height: window.innerHeight/2 - 100,
            padding: 0
        });
        chart2.source(dv, {
            x: {
                nice: false
            },


            y: {
                nice: false
            }
        });
        chart2.legend(false);
        chart2.axis(false);
        chart2.tooltip({
            showTitle: false
        });
        chart2.coord().reflect();
        chart2.point().position('x*y').color('name').shape('cloud').tooltip('value*category');
        chart2.render();
</script>
</body>
</html>

